<template>
  <view class="content">
    <uni-icons
      class="back"
      @click="back"
      type="left"
      size="30"></uni-icons>
    <image
      :src="info.imgUrl"
      style="width: 100%; height: 600rpx"></image>
    <view class="main">
      <view class="goodsInfo">
        <view class="price"> {{ info.consumeNum }}{{ $tokenName }} </view>
        <view class="goodsname">
          {{ info.name || '' }}
        </view>
        <view class="num">
          <text
            >月兑数量:{{
              info.monthlyExchange ? info.monthlyExchange : '0'
            }}</text
          >
          <!-- <image src="/static/vip.png" mode=""></image> -->
          <view class="vip">V会员专享</view>
        </view>
      </view>
      <!-- <image src="/static/way.png" class='way'></image> -->
      <view class="way">
        <view style="padding: 10px 0 10px 10px"> 使用方法 </view>
        <view class="flex">
          <view>
            <image
              src="../../static/way1.png"
              mode=""></image>
            <view>兑换权益</view>
          </view>
          <view>
            <view class="center">
              <view class="xline"></view>
              <image
                src="../../static/way2.png"
                mode=""></image>
              <view class="xline1"></view>
            </view>
            <view>去对应场景使用权益</view>
          </view>
          <!--  -->
          <view>
            <image
              src="../../static/way3.png"
              mode=""></image>
            <view>权益使用成功</view>
          </view>
        </view>
      </view>
      <view class="condition">
        <view>{{ $tokenName }}兑换条件</view>
        <view class="explain">
          <view> 兑后需知 </view>
          <view>
            兑换产品不可退换<br />
            为保证活动健康有序进行，如果在获取和使 用过程中出现违规行为
            (如作弊领取、恶意 套现、刷取信誉、虚假交易等)，我们将取消
            您的使用资格，并有权撤销违规交易。
          </view>
        </view>
        <view class="explain">
          <view> 有效期 </view>
          <view> 兑换后2天内有效 </view>
        </view>
      </view>
    </view>
    <view class="exchange">
      <view
        class="goExchange"
        @click.stop="exchangeBtn"
        >立即兑换
      </view>
      <uni-popup
        ref="popup"
        type="bottom"
        background-color="#fff"
        @change="popupchange">
        <view class="popup">
          <view>商品详情</view>
          <view class="goodinfo">
            <image
              :src="info.imgUrl"
              mode=""></image>
            <view class="rightinfo">
              <view>
                {{ info.name || '' }}
              </view>
              <view>
                <view class="price">
                  {{ info.consumeNum }}{{ $tokenName }}</view
                >
                <view class="num">
                  月兑数量:{{
                    info.monthlyExchange ? info.monthlyExchange : '0'
                  }}
                </view>
              </view>
            </view>
          </view>
          <view style="margin-top: 20px"> 单位 </view>
          <view class="unit">
            {{ info.unit }}
          </view>
          <view class="exchangeNum">
            <text>兑换数量</text>
            <uni-number-box
              v-model="num"
              :min="1"
              @change="changeValue" />
          </view>
          <view
            class="exchangeNum"
            style="margin-bottom: 30px">
            <text>我的{{ $tokenName }}</text>
            <text>{{ info.tokenNum }}{{ $tokenName }}</text>
          </view>
          <view
            class="goExchange"
            @click.stop="submit"
            >确认兑换
          </view>
        </view>
      </uni-popup>
    </view>
  </view>
</template>

<script>
  import { goExchangeById, exchangeGoods } from '@/apis/first'
  import { rsaDecrypt } from '@/utils/rsa'
  export default {
    data() {
      return {
        farmerCommodityId: '',
        memberId: '',
        num: 1,
        info: {},
        str: ''
      }
    },
    computed: {
      useToken() {
        return this.num * this.info.consumeNum
      }
    },
    onLoad(option) {
      this.farmerCommodityId = option.farmerCommodityId
      this.memberId = option.memberId
      console.log(this.farmerCommodityId, this.memberId)
    },
    onShow() {
      if (this.memberId) {
        this.goExchangeById()
        console.log(1111)
      }
    },
    methods: {
      back() {
        uni.navigateBack()
      },
      popupchange(e) {
        console.log(e)
        if (!e.show) {
          this.$nextTick(() => {
            this.num = 1
          })
        }
      },
      async goExchangeById() {
        const res = await goExchangeById({
          farmerCommodityId: this.farmerCommodityId,
          memberId: this.memberId
        })
        if (res.code === 200) {
          const data = res.data
          console.log(data)
          this.info = data
          this.str = JSON.stringify(data)
        } else {
          uni.utils.toast(res.message)
          // 后续可能要跳转首页
        }
      },
      async exchangeBtn() {
        if (this.info.tokenNum < this.useToken) {
          return uni.utils.toast('您的' + this.$tokenName + '不足，无法兑换')
        } else {
          this.$refs.popup.open('bottom')
        }
      },
      async submit() {
        const res = await exchangeGoods({
          commodityId: this.info.id,
          memberId: this.memberId,
          count: this.num
        })
        if (res.code === 200) {
          console.log(res, '兑换成功')
          this.$refs.popup.close()
          uni.utils.toast(res.message)
          let data = rsaDecrypt(res.data.data)
          console.log(rsaDecrypt(res.data.data))
          uni.redirectTo({
            url:
              '/pages/exchangeSuccess/index?consumeNum=' +
              data.consumeNum +
              '&serialNum=' +
              data.serialNum
          })
        } else {
          console.log(res)
          uni.utils.toast(res.message)
        }
      },
      changeValue(value) {
        console.log('返回数值：', value)
        if (value > this.info.maxExchange) {
          this.$nextTick(() => {
            this.num = this.info.maxExchange
          })
          uni.utils.toast('最大兑换数量为' + this.info.maxExchange)
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  page {
    background: #f6f6f6;
  }

  .content {
    image:nth-child(1) {
      width: 100%;
      height: 310px;
    }
    .back {
      position: fixed;
      top: 10px;
      left: 10px;
      z-index: 9;
    }
    .main {
      z-index: 4;
      position: absolute;
      top: 290px;
      width: 100%;
      padding-bottom: 140px;
      text-align: center;
      background: #f6f6f6;

      .goodsInfo {
        text-align: left;
        padding: 10px;
        width: calc(100% - 40rpx);
        background: #fff;
        border-radius: 6px;
        margin: 0 auto;

        .price {
          font-size: 20px;
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          color: #ff3d00;
        }

        .goodsname {
          font-size: 16px;
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          color: #1a1a1a;
          margin-top: 10px;
          margin-bottom: 20rpx;
        }

        .num {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 12px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          color: #999999;

          .vip {
            font-size: 11px;
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            color: #0766fe;
          }

          image {
            width: 54px;
            height: 15px;
          }
        }
      }

      .way {
        width: calc(100% - 20px);
        height: 100px;
        margin: 0 auto;
        margin-top: 10px;
        background: #fff;
        border-radius: 8px;
        text-align: left;
        font-size: 16px;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        color: #1a1a1a;
        image {
          width: 26px;
          height: 26px;
        }
        .flex {
          display: flex;
          justify-content: space-between;
          align-items: center;
          text-align: center;
          font-size: 12px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          color: #999999;
          margin: 0 20px;
          .center {
            position: relative;
            width: 100%;
          }
          .xline {
            width: 70%;
            height: 0px;
            border-radius: 0px 0px 0px 0px;
            opacity: 1;
            border: 1px dashed #999999;
            position: absolute;
            left: 76px;
            top: 50%;
            transform: translateY(-50%);
          }
          .xline1 {
            position: absolute;
            right: 76px;
            top: 50%;
            transform: translateY(-50%);
            width: 70%;
            height: 0px;
            border-radius: 0px 0px 0px 0px;
            opacity: 1;
            border: 1px dashed #999999;
          }
        }
      }

      .condition {
        text-align: left;
        padding: 10px;
        width: calc(100% - 20px);
        background: #fff;
        border-radius: 6px;
        margin: 0 auto;
        margin-top: 10px;

        > view:first-child {
          font-size: 16px;
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          color: #1a1a1a;
        }

        .explain {
          display: flex;
          align-items: flex-start;
          justify-content: flex-start;
          margin-top: 20px;

          > view:first-child {
            font-size: 14px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            color: #999999;
            width: 18%;
          }

          > view:last-child {
            max-width: 82%;
            font-size: 14px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            color: #666666;
          }
        }
      }
    }

    .exchange {
      width: 100%;
      position: fixed;
      bottom: 0;
      background: #fff;
      z-index: 6;
    }

    .goExchange {
      height: 50px;
      line-height: 50px;
      text-align: center;
      background: linear-gradient(90deg, #05d4fd 0%, #2976ff 100%);
      width: 90%;
      margin: 10px auto;
      border-radius: 25px;
      font-size: 24px;
      font-weight: 500;
      font-size: 32rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      color: #fff;
    }

    .popup {
      width: 100%;
      padding: 20px 20px 0 20px;
      font-size: 16px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      color: #1a1a1a;

      .goodinfo {
        margin-top: 10px;
        display: flex;
        align-items: center;

        > image {
          width: 100px;
          height: 100px;
          border-radius: 6px;
          margin-right: 10px;
        }

        .rightinfo {
          height: 100px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          > view:first-child {
            font-weight: bold;
          }
          .price {
            font-size: 16px;
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            color: #ff3d00;
          }

          .num {
            font-size: 12px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            color: #999999;
          }
        }
      }

      .unit {
        width: 53px;
        height: 24px;
        background: #ffede0;
        border-radius: 12px 12px 12px 12px;
        opacity: 1;
        border: 1px solid #ff5f1b;
        text-align: center;
        line-height: 24px;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        color: #ff5f1b;
        margin-top: 10px;
      }

      .exchangeNum {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
        align-items: center;
      }
    }
  }
</style>
